<script setup>
import { onMounted, ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { deviceRadarServer } from '@/api'
const counts = ref(0)
const list = ref([])

// 获取起降设施列表
const getDeviceData = async () => {
  const res = await deviceRadarServer()
  counts.value = res.data.count
  list.value = res.data.deviceDataList
}

onMounted(() => {
  getDeviceData()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="监视探测目标" />
    <div class="flytime">
      <p>
        <span>监视探测目标数</span>
        <span>/个</span>
      </p>
      <p><NumberAnimate :count="counts"></NumberAnimate></p>
    </div>
    <div class="table">
      <ul class="thead">
        <li>飞行器</li>
        <li>高度</li>
        <li>速度</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="list"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="5"
        >
          <li v-for="(item, index) in list" :key="index">
            <p>
              <el-tooltip effect="dark" :content="item.equipmentName" placement="top">
                <span>{{ item.equipmentName }}</span>
              </el-tooltip>
            </p>
            <p>
              <span>{{ item.height }}</span>
            </p>
            <p>
              <span>{{ item.speed }}</span>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 10px;
  .flytime {
    width: 100%;
    height: 43px;
    background: url('@img/overview/fly_servertime_bg.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    margin: 0 10px;

    p:first-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 5px 0 5px 30px;
      span:last-child {
        color: #2f9cff;
      }
    }

    p:last-child {
      flex: 1;
      text-align: center;
    }
    &:deep(.odometer-numbers) {
      span {
        font-family: DINAlternate;
        font-size: 28px;
        line-height: 28px;
        color: #ffffff;
        letter-spacing: 5px;
        background: linear-gradient(to bottom, #ffffff 0%, #00d5ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .navbox {
    display: flex;
    align-items: center;
    padding: 5px 10px;

    p {
      flex: 1;
      padding: 5px 0 10px;
      font-size: 15px;
      opacity: 0.7;
      text-align: center;
      cursor: pointer;
      background: left bottom url('@img/overview/navbar.png') no-repeat;
      background-size: 100% 3px;

      &.active {
        opacity: 1;
        position: relative;
        background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
        background-size: 120% 20px;

        &::before {
          position: absolute;
          top: 15px;
          left: 0;
          width: 7px;
          height: 7px;
          content: '';
          background: url('@img/overview/arrow_left.png');
          background-size: 100% 100%;
        }

        &::after {
          position: absolute;
          top: 15px;
          right: 0;
          width: 7px;
          height: 7px;
          content: '';
          background: url('@img/overview/arrow_right.png');
          background-size: 100% 100%;
        }
      }
    }
  }

  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;

        &:first-child {
          flex: 2;
        }
      }
    }

    .tbody {
      height: 120px;
      overflow: hidden;
      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        p {
          flex: 1;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            flex: 2;
          }

          .type {
            width: 67px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}
</style>
